<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>富扬数据看板</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="/stylesheets/css/bootstrap.min.css">
  <link rel="stylesheet" href="/stylesheets/css/AdminLTE.min.css">
  <link rel="stylesheet" href="/stylesheets/skins/_all-skins.min.css">
  <style>
    .alert{
      padding: 8px;
      position: fixed;
      z-index: 2000;
      width: 300px;
      top: 30px;
      left:0; right:0;
      margin: 0 auto;
    }
    .alert p{
      text-align: center;
      font-size: 14px;
    }
    .close{
      font-size: 16px;
    }
    .box-header{
      padding-bottom: 0;
    }
    .h-30{
      height:30px;
    }
    .content-header>h1>.breadcrumb {
      background: transparent;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 12px;
      padding: 7px 5px;
      border-radius: 2px;
      display: inline-block;
    }
  </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
  <%- include("./public/header.ejs") %>

  <%- include("./public/aside.ejs") %>

  <div id="alert"></div>

  <div class="content-wrapper">
    <section class="content-header">
      <h1>
        提成计算
        <ol class="breadcrumb">
          <li><a href="/"><i class="glyphicon glyphicon-dashboard"></i>首页</a></li>
          <li class="active">提成计算</li>
        </ol>
      </h1>
    </section>
    <section class="content">
      <div class="row">
        <div class="col-md-12">
          <div class="box">
            <div class="box-header">
              <a class="btn btn-info btn-xs" data-toggle="modal" data-target="#modal-file">导入订单</a>
              <a href="/commission/exportTemp" class="btn btn-default btn-xs">导出模板</a>
            </div>
            <div class="box-body">
              <!-- <div class="row" style="margin-bottom: 5px;">
                <div class="col-md-12">
                  <button class="btn btn-info btn-sm col-md-1 search" style="margin-top: 24px;">查询</button>
                  <button class="btn btn-info btn-sm col-md-1 save" style="margin-top: 24px;margin-left: 10px;" data-toggle="modal" data-target="#modal-save">保存</button>
                  <a href="/commission/export" class="btn btn-info btn-sm col-md-1" style="margin-top: 24px;margin-left: 10px;">导出</a>
                </div>
              </div> -->
              <div class="row">
                <div class="col-md-4">
                  <!-- <label>请选择日期:</label>
                  <div class="input-group">
                    <div class="input-group-addon h-30">
                      <i class="glyphicon glyphicon-th"></i>
                    </div>
                    <input type="month" class="form-control pull-right h-30 year_month1">
                  </div>
                   -->
                  <ul>
                    <li>
                      <span>2023年</span>
                      <ul>
                        <li>一月</li>
                        <li>二月</li>
                      </ul>
                    </li>
                    <li>
                      <span>2024年</span>
                      <ul>
                        <li>一月</li>
                        <li>二月</li>
                      </ul>
                    </li>
                  </ul>
                </div>
                <div class="col-md-8">
                  <div class="row" style="margin-bottom: 5px;">
                    <div class="col-md-12">
                      <button class="btn btn-info btn-sm col-md-1 save" data-toggle="modal" data-target="#modal-save">保存</button>
                      <a href="/commission/export" class="btn btn-info btn-sm col-md-1" style="margin-left: 10px;">导出</a>
                    </div>
                  </div>
                  <div id="example" class="ag-theme-quartz" style="height: calc(100vh - 278px)">
                    <img src="/images/loading.gif" alt="" class="loading">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <%- include("./public/footer.ejs") %>
</div>

<!-- 选择文件 -->
<div class="modal fade" id="modal-file">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form action="/commission/import" method="post" enctype="multipart/form-data" role="form">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">请选择</h4>
        </div>
        <div class="modal-body">
          <input type="file" id="exampleInputFile" name="commission">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 保存提示 -->
<div class="modal fade" id="modal-save">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <form action="/commission/save" method="post" role="form">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">请选择保存到年月<br />
            <small>如果该年月已有提成数据，保存后覆盖原数据</small>
            <small>请在左侧时间线中查看指定月份是否已保存</small>
          </h4>
        </div>
        <div class="modal-body">
          <input type="month" class="form-control year_month2" name="month">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="/javascripts/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="/javascripts/moment.min.js"></script>
<script src="/javascripts/ag-grid-community.min.js"></script>
<script src="/javascripts/adminlte.min.js"></script>

<script>

const commissionData = <%- JSON.stringify(commissionData) %>;

//定义表格列
var columnDefs = [
  { headerName: '姓名', field: 'name', width: 120 },
  { headerName: '部门', field: 'team', width: 300 },
  { headerName: '职位', field: 'job', width: 180 },
  { headerName: '金额', field: 'count', width: 120 },
];

var botRows=[
  { name: '', team: '', job: '合计', count: commissionData.reduce((prev,val)=>prev+val.count, 0) },
];

//将列和数据赋给gridOptions 
var gridOptions = {
  tooltipShowDelay: 500,
  columnDefs: columnDefs,
  rowData: [],
  defaultColDef: {
    filter: true,
  },
  pinnedBottomRowData:botRows,
  getRowStyle: function (params) { 
    if (params.node.rowPinned) {   
      return {'font-weight': 'bold'};
    }
  },
  onGridReady: function () {
    $(".loading").hide();
    gridApi.setGridOption("rowData", commissionData);
  },
};
let gridApi = null;
setTimeout(()=>{
  gridApi = agGrid.createGrid(document.querySelector("#example"), gridOptions);
});


const date = {};
if(location.search){
  const nowDate = location.search.split("=")[1];
  $(".year_month1").val( nowDate );
  $(".year_month2").val( nowDate );
}else{
  const nowDate = new Date();
  $(".year_month1").val( nowDate.getFullYear() + "-" + cz(nowDate.getMonth()+1));
  $(".year_month2").val( nowDate.getFullYear() + "-" + cz(nowDate.getMonth()+1));
}


$(".search").on("click",function(){
  location.assign(`/commission` + `?month=${$(".year_month1").val()}`);
})

// if(commissionData.length > 0){
//   $(".save").removeAttr("disabled");
// }else{
//   $(".save").attr("disabled", "disabled");
// }

function alert(ops){
  const {type='info', msg='提示信息'} = ops;
  const innerHTML = `<div class="alert alert-${type}"><span class="close" data-dismiss="alert" aria-hidden="true">&times;</span><p>${msg}!</p></div>`;
  if($("#alert").html()){
    $("#alert").show(100);
  }else{
    $("#alert").html(innerHTML);
  }

  clearTimeout($("#alert").t);
  $("#alert").t = setTimeout(()=>{
    $("#alert").hide(100);
  }, 2000)
  return $("#alert");
}

function cz(n){
  return n < 10 ? "0"+n : n;
}
</script>
</body>
</html>
